<script setup lang="ts">
const data = [
    { name: '任芳', code: '1.PO20198989001', date: '1972-02-19', desc: '华北地区项目的物资采购订购，分批付款', amount: 63.85 ,avatar:'./assets/avatar1.png'},
    { name: '戴秀兰', code: '2.PO20198989002', date: '1980-03-17', desc: '华北地区项目的物资采购订购，分批付款', amount: 60.13,avatar:'./assets/avatar2.png'},
    { name: '尹磊', code: '3.PO20198989003', date: '1990-04-09', desc: '华北地区项目的物资采购订购，分批付款', amount: 36.54 ,avatar:'./assets/avatar3.png'},
    { name: '赵明', code: '4.PO20198989004', date: '1976-03-27', desc: '华北地区项目的物资采购订购，分批付款', amount: 52.76 ,avatar:'./assets/avatar4.png'},
    { name: '吕洋', code: '5.PO20198989005', date: '1979-11-17', desc: '华北地区项目的物资采购订购，分批付款', amount: 84.13 ,avatar:'./assets/avatar5.png'},
    { name: '锺艳', code: '6.PO20198989006', date: '2001-05-08', desc: '华北地区项目的物资采购订购，分批付款', amount: 72.05 ,avatar:'./assets/avatar6.png'},
    { name: '邓霞', code: '7.PO20198989007', date: '1982-01-16', desc: '华北地区项目的物资采购订购，分批付款', amount: 57.88 ,avatar:'./assets/avatar7.png'},
    { name: '林超', code: '8.PO20198989008', date: '1978-02-21', desc: '华北地区项目的物资采购订购，分批付款', amount: 2.44 ,avatar:'./assets/avatar8.png'},
    { name: '李强', code: '9.PO20198989009', date: '1974-01-30', desc: '华北地区项目的物资采购订购，分批付款', amount: 91.96 ,avatar:'./assets/avatar9.png'},
    { name: '黄秀兰', code: '10.PO20198989010', date: '1975-01-19', desc: '华北地区项目的物资采购订购，分批付款', amount: 28.42 ,avatar:'./assets/avatar10.png'}
];
</script>
<template>
    <div style="background-color: white">
        <f-list-view :data="data" style="width: 680px" :multi-select="true">
            <template #content="listItemProps">
                <div class="f-template-listview-row">
                    <div class="list-view-item-title">
                        <div class="item-title-img">
                            <img :src="listItemProps.item.avatar" alt="" style="width: 44px;">
                        </div>
                        <div class="item-title">
                            <p class="item-title-heading">{{listItemProps.item.code}}</p>
                            <p class="item-title-text">{{listItemProps.item.desc}}</p>
                        </div>
                    </div>
                    <div class="list-view-item-content">
                        <div class="content-message">
                            <div class="ower">
                                <p>创建人</p>
                                <p class="con">{{listItemProps.item.name}}</p>
                            </div>
                            <div class="date">
                                <p>创建时间</p>
                                <p class="con">{{listItemProps.item.date}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="list-view-item-operate">
                        <a href="javascript:void(0)" class="operate-btn">付款</a>
                        <a href="javascript:void(0)" class="operate-btn">收货</a>
                    </div>
                </div>
            </template>
        </f-list-view>
    </div>
</template>
<style>
.f-template-listview-row {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.125)
}

.f-template-listview-row .list-view-item-title {
    display: flex;
    align-items: center;
    padding-right: 8px
}

.f-template-listview-row .list-view-item-title .item-title-img {
    width: 44px;
    height: 44px;
    margin-right: 16px;
    border-radius: 6px;
    overflow: hidden
}

.f-template-listview-row .list-view-item-title .item-title-img img {
    display: block;
    width: 44px;
    height: 44px
}

.f-template-listview-row .list-view-item-title .item-title {
    flex: 1 1 auto
}

.f-template-listview-row .list-view-item-title .item-title .item-title-heading {
    margin: 0;
    line-height: 28px;
    max-height: 28px;
    font-size: 16px;
    overflow: hidden
}

.f-template-listview-row .list-view-item-title .item-title .item-title-text {
    margin-bottom: 0;
    line-height: 24px;
    font-size: 14px;
    color: #999
}

.f-template-listview-row .list-view-item-content {
    flex: 1;
    padding: 0 8px;
    text-align: right
}

.f-template-listview-row .list-view-item-content .content-message {
    font-size: 0
}

.f-template-listview-row .list-view-item-content .content-message .date,
.f-template-listview-row .list-view-item-content .content-message .ower {
    display: inline-block;
    font-size: 14px;
    color: #999
}

.f-template-listview-row .list-view-item-content .content-message .date p,
.f-template-listview-row .list-view-item-content .content-message .ower p {
    margin-bottom: 0
}

.f-template-listview-row .list-view-item-content .content-message .ower {
    text-align: left
}

.f-template-listview-row .list-view-item-content .content-message .date {
    margin-left: 32px;
    text-align: right;
    width: 90px;
}

.f-template-listview-row .list-view-item-operate {
    padding-left: 20px;
    font-size: 0
}

.f-template-listview-row .list-view-item-operate .operate-btn {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    color: #388fff
}

.f-template-listview-row .list-view-item-operate .operate-btn:first-child {
    margin-left: 0
}

.f-template-listview-title-text,
.f-template-timeline-row .timeline-example-content-wrapper .timeline-example-content .content-data li,
.f-template-timeline-row .timeline-example-content-wrapper .timeline-example-title {
    color: #000;
    opacity: .65;
    font-size: 14px;
    line-height: 20px
}

.f-template-timeline-row {
    width: 100%
}

.f-template-timeline-row .timeline-example-content-wrapper .timeline-example-title {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(220,220,220,.6)
}

.f-template-timeline-row .timeline-example-content-wrapper .timeline-example-title .title-sum {
    line-height: 22px;
    font-size: 16px;
    color: #f49730
}

.f-template-timeline-row .timeline-example-content-wrapper .timeline-example-content .content-data {
    font-size: 0;
    margin-top: 16px
}

.f-template-timeline-row .timeline-example-content-wrapper .timeline-example-content .content-data li {
    display: inline-block;
    padding-right: 30px;
    margin-bottom: 18px
}

.f-template-listnav-row .list-nav-link {
    display: flex;
    align-items: center;
    padding: 10px 14px 10px 40px
}

.f-template-listnav-row .list-nav-link.link-disable {
    background-color: #f9f9f9
}

.f-template-listnav-row .list-nav-link .nav-item-name {
    flex: 1;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.f-template-listnav-row .list-nav-link .nav-item-counter {
    display: inline-block;
    padding: 0 5px;
    height: 14px;
    line-height: 14px;
    background: rgba(89,161,255,.14);
    border-radius: 8px;
    font-size: 10px;
    color: #388fff
}

.f-template-listnav-row .list-nav-link:hover {
    background: #e6f7ff
}

.f-template-listnav-row .list-nav-link.active {
    background: #e6f7ff;
    border-left: 3px solid #388fff;
    padding-left: 37px
}

.f-template-listnav-row .list-nav-link.active .nav-item-counter {
    background: #388fff;
    color: #fff
}

.f-template-common-row {
    padding: 12px 16px;
    align-items: center
}

.f-template-common-row .item-action-primary {
    display: inline-block;
    margin-right: 16px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden
}

.f-template-common-row .item-action-primary .ap-img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%
}

.f-template-common-row .listview-item-content {
    border-bottom: 1px solid #d9d9d9;
    flex: 1 1 auto
}

.f-template-common-row .listview-item-content .listview-item-main {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0
}

.f-template-common-row .listview-item-content .listview-item-title {
    font-size: 16px;
    color: rgba(0,0,0,.85)
}

.f-template-common-row .listview-item-content .listview-item-subtitle {
    font-size: 14px;
    color: rgba(0,0,0,.45)
}

.f-template-common-row .listview-item-content .listview-item-btns .btn {
    margin-left: 5px
}

.f-template-card-row {
    width: 300px;
    background: #fff;
    padding: 15px 26px 23px 33px;
    margin-right: 14px;
    margin-bottom: 14px
}

.f-template-card-row .item-action-primary {
    display: inline-block;
    margin-right: 16px;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    overflow: hidden
}

.f-template-card-row .item-action-primary .ap-img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%
}

.f-template-card-row .listview-item-content {
    flex: 1 1 auto
}

.f-template-card-row .listview-item-content .listview-item-title {
    font-size: 16px;
    color: rgba(0,0,0,.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.f-template-card-row .listview-item-content .listview-item-subtitle {
    font-size: 14px;
    color: rgba(0,0,0,.45)
}

.f-template-wizard-message-text,
.f-template-wizard-page .page-friendly-reminder .reminder-close .no-prompt,
.f-template-wizard-page .page-friendly-reminder .reminder-message .message,
.f-template-wizard-page .page-friendly-reminder .reminder-message .reminder-title .reminder-name,
.f-template-wizard-title-text {
    font-size: 14px;
    color: rgba(0,0,0,.85);
    line-height: 20px
}

.f-template-wizard-message-text,
.f-template-wizard-page .page-friendly-reminder .reminder-message .reminder-title .reminder-name {
    opacity: .65
}

.f-template-wizard-page {
    padding-right: 14px;
    height: 100%;
    display: flex;
    flex-direction: column
}

.f-template-wizard-page .page-friendly-reminder {
    display: flex;
    height: 38px;
    line-height: 38px;
    padding: 0 16px 0 26px;
    background: #e6f7ff
}

.f-template-wizard-page .page-friendly-reminder .reminder-message {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.f-template-wizard-page .page-friendly-reminder .reminder-message .reminder-title {
    padding-right: 15px
}

.f-template-wizard-page .page-friendly-reminder .reminder-message .reminder-title .f-icon {
    margin-right: 10px
}

.f-template-wizard-page .page-friendly-reminder .reminder-message .message {
    font-size: 12px
}

.f-template-wizard-page .page-friendly-reminder .reminder-close .no-prompt {
    margin-right: 7px;
    color: #295ea3;
    opacity: 1
}

.f-template-wizard-page .page-friendly-reminder .reminder-close .close-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: #979797;
    cursor: pointer
}

.f-template-wizard-page .f-template-wizard-page-content {
    padding: 11px 0 14px 14px
}

.f-template-wizard-page .f-template-wizard-page-content .f-template-wizard-page-operation {
    margin-top: 21px
}

.f-template-wizard-page .f-template-wizard-page-content .f-template-wizard-page-operation .btn {
    margin-right: 6px
}

.f-template-wizard-page .f-template-wizard-page-footer {
    height: 56px;
    line-height: 56px;
    border-top: 1px solid #e9e9e9;
    text-align: right;
    width: 100%
}

.f-template-wizard-page .f-template-wizard-page-footer .btn {
    margin-left: 20px
}
</style>
